<template>
  <div class="container">
    <el-row>
      <el-form :model="queryParams" label-width="80px" size="small" :inline="true">
        <el-col :span="24" :xs="24" style="text-align: left">
          <el-form-item label="编码">
            <el-input v-model="queryParams.code" placeholder="输入组织编码进行搜索" width="200px"/>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="queryParams.name" placeholder="输入组织名称进行搜索" width="200px"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQueryUser">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetQueryUser">重置</el-button>
          </el-form-item>
          <el-form-item label=" " prop="showDisabled">
            <el-checkbox @change="showNoPostPerson">查询未分配岗位的人员</el-checkbox>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row>
      <el-col v-if="searching" :span="11" :xs="24" style="text-align: left">
        <el-table v-loading="loading"
                  :height="tableHeight"
                  :data="list"
                  border
                  fit
                  @cell-dblclick="handleLeftTableDbclickToRight"
                  @selection-change="handleLeftTableSelectionChange">
          <el-table-column
            type="selection"
            fixed
            width="45">
          </el-table-column>
          <el-table-column label="姓名" align="left" prop="name" min-width="150" fixed show-overflow-tooltip/>
          <el-table-column label="机构" align="left" prop="fullName" min-width="350" show-overflow-tooltip/>
        </el-table>
        <!-- 分页组件 -->
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo"
                    :limit.sync="queryParams.pageSize" :pager-count="5" small
                    @pagination="handleQueryUser"/>
      </el-col>
      <el-col v-else :span="11" :xs="24" style="text-align: left">
        <el-card class="box-card card-height" shadow="never">
          <el-tree
            :props="defaultProps" :expand-on-click-node="true" lazy :load="orgNodeExpand" show-checkbox
            :check-strictly="true" @check="orgNodeCheck" node-key="id"
            ref="orgTree" highlight-current @node-click="handleOrgNodeClick"/>

        </el-card>
      </el-col>
      <el-col :span="2" :xs="24">
        <div class="div-opr">
          <div>
            <el-button type="primary" @click="handleToRight"> >></el-button>
          </div>
          <div>&nbsp;</div>
          <div>
            <el-button type="primary" @click="handleToLeft"> <<</el-button>
          </div>
        </div>

      </el-col>
      <el-col :span="11" :xs="24" style="text-align: left">
        <el-table class="card-height"
                  :data="rightUsers"
                  :height="tableHeight"
                  border
                  fit
                  @cell-dblclick="handleRightTableDbClk"
                  @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column label="姓名" align="left" prop="name" min-width="60" show-overflow-tooltip/>
          <el-table-column label="机构" align="left" prop="fullName" min-width="250" show-overflow-tooltip/>
        </el-table>
      </el-col>
      <el-col :span="24" :xs="24" style="padding-top: 10px;text-align: right">
        <el-button type="primary" @click="confirm">确 定</el-button>
        <el-button @click="cancel">关 闭</el-button>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import {
  getOrgPage,
  queryOrgTree
} from "@/api/sa/org";

import {OrgKindEnum} from "@/utils/constants";
import {getPersonPage} from "@/api/sa/person";

export default {
  name: "SaUserPicker",
  props: {
    // 值
    // value: [String, Object, Array],
    orgKindId: {
      type: String,
    },
    multiple: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      searching: false,
      tableHeight: 400,
      // 导出遮罩层
      defaultProps: {
        children: "children",
        label: "name"
      },
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        orgKindIds: OrgKindEnum.Psm.code,
        code: null,
        name: null,
        status: 0, // 有效
        isVirtual: 0 //非虚拟组织
      },
      // 总条数
      total: 0,
      // 组织机构管理列表
      list: [],
      leftCheckedUsers: [],
      rightUsers: [],
      rightUsersMap: {},
      rightCheckedUsers: [],
      isPerson: false
    };
  },
  watch: {
    value: {
      handler(val) {
        if (val) {

        } else {

        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    showNoPostPerson(val) {
      this.isPerson = val

    },
    handleQueryUser() {
      this.loading = true;
      if (this.isPerson) {
        getPersonPage(this.queryParams).then(response => {
          this.list = response.data.list;
          this.total = response.data.total;
          this.loading = false;
          this.searching = true;
        })
      } else {
        // 执行查询
        this.queryParams.orgKindIds = this.orgKindId ? this.orgKindId : this.queryParams.orgKindIds
        getOrgPage(this.queryParams).then(response => {
          this.list = response.data.list;
          this.total = response.data.total;
          this.loading = false;
          this.searching = true;
        });
      }
    },
    resetQueryUser() {
      this.searching = false
      this.leftCheckedUsers = []
      this.queryParams = {
        pageNo: 1,
        pageSize: 10,
        code: null,
        name: null,
        status: 0, // 有效
        isVirtual: 0 //非虚拟组织
      }
    },
    // 右移按钮，将左选框选中的选项添加到右选框中
    handleToRight() {
      this.leftCheckedUsers.forEach((item, key) => {
        if (!this.rightUsersMap[item.id]) {
          if (!this.multiple) {
            // 不是多选时，清空已有选项
            this.rightUsers = []
            this.rightUsersMap = {}
          }
          if (this.isPerson) {
            this.rightUsers.push(item)
            this.rightUsersMap[item.id] = item
          } else if (this.orgKindId.indexOf(item.orgKindId) > -1) {
            this.rightUsers.push(item)
            this.rightUsersMap[item.id] = item
          }
        }
      })
      this.leftCheckedUsers = []
    },
    handleToLeft() {
      this.rightCheckedUsers.forEach((item, key) => {
        delete this.rightUsersMap[item.id]
      })
      this.rightUsers = []
      for (let val in this.rightUsersMap) {
        this.rightUsers.push(this.rightUsersMap[val])
      }
      this.rightCheckedUsers = []
    },

    //懒加载树节点，
    orgNodeExpand(node, resolve) {
      let id = node.level == 0 ? '' : node.data.id
      queryOrgTree(id).then(response => {
        resolve(response.data);
      });
    },
    handleOrgNodeClick() {

    },
    orgNodeCheck(data, checkedData) {
      this.leftCheckedUsers = checkedData.checkedNodes
    },
    handleLeftTableSelectionChange(val) {
      this.leftCheckedUsers = val;
    },

    // 左选框 双击添加选项
    handleLeftTableDbclickToRight(item) {
      if (!this.multiple) {
        // 不是多选时，清空已有选项
        this.rightUsers = []
        this.rightUsersMap = {}
      }
      if (!this.rightUsersMap[item.id]) {
        this.rightUsers.push(item)
        this.rightUsersMap[item.id] = item
      }
    },
    handleSelectionChange(val) {
      this.rightCheckedUsers = val;
    },

    // 右选框 双击删除已选项
    handleRightTableDbClk(item) {
      if (!this.multiple) {
        // 不是多选时，清空已有选项
        this.rightUsers = []
        this.rightUsersMap = {}
        return
      }
      delete this.rightUsersMap[item.id]
      this.rightUsers = []
      for (let val in this.rightUsersMap) {
        this.rightUsers.push(this.rightUsersMap[val])
      }
    },
    confirm() {
      this.$emit("complete", this.rightUsers);
      this.$emit("close");
      this.reset()
    },
    cancel() {
      this.$emit("close");
      this.reset()
    },
    reset() {
      this.leftCheckedUsers = []
      this.rightUsers = []
      this.rightUsersMap = {}
      this.rightCheckedUsers = []
      this.isPerson = false
      this.list = []
      this.searching = false
    }
  }
}
</script>

<style scoped>
.container {
  height: 500px

}

.card-height {
  height: 400px;
  overflow-y: scroll
}

.div-opr {
  text-align: center;
  padding-top: 130px;
  height: 300px
}


</style>
